<section class="wrapper site-min-height">
    <div class="panel">
        <!-- <div class="row" *ngFor="let item of product$"> -->
        <div class="row">
            <div class="col-md-5">
                <div class="images-box">
                    <!-- <img src="https://images-na.ssl-images-amazon.com/images/I/A1vjqBAZEzL._SL1500_.jpg" id="product-images" class="img-responsive"> -->
                    <!-- <img src="{{item.imagesUlr}}" id="product-images" class="img-responsive"> -->
                </div>
                <div class="text-center">
                    <!-- ASIN: B01LZ2QE21 -->
                    ASIN: {{product$.asin}}
                </div>
                <div class="text-center m-t-xl" id="product-link">
                    <!-- <a class="btn btn-white btn-sm" href="https://www.amazon.com/dp/B01LZ2QE21?psc=1" target="_blank"> -->
                    <a class="btn btn-white btn-sm" href="https://www.amazon.com/dp/{{product$.asin}}?psc=1" target="_blank">
                        <i class="fa fa-long-arrow-right"></i> 亚马逊链接
                    </a>
                </div>
            </div>
            <div class="col-md-7" id="product-tb">
                <!-- <h2>Fish Feeder, Automatic Fish Feeder, eBoTrade Aquarium </h2> -->
                <h2>{{product$.title}}</h2>
                <table class="table table-bordered">

                  <tbody>
                      <tr>
                        <td class="text-center">Price</td>

                        <td class="text-center"><strong>￥</strong></td>
                        <td class="text-center">Seller</td>

                        <td class="text-center"><strong>{{product$.publisher}}</strong></td>
                      </tr>
                      <tr>
                        <td class="text-center">Status</td>
                        <td class="text-center"><strong></strong></td>
                        <td class="text-center">尺寸</td>
                        <td class="text-center"><strong>{{product$.size}}</strong></td>
                      </tr>
                      <tr>
                        <td class="text-center">品类</td>
                        <td class="text-center"><strong></strong></td>
                        <td class="text-center">重量</td>
                        <td class="text-center"><strong></strong></td>
                      </tr>
                      <tr>
                        <td class="text-center">评论总量</td>
                        <td class="text-center"><strong>暂无</strong></td>
                        <td class="text-center">Date</td>
                        <td  class="text-center"><strong></strong></td>
                      </tr>
                  </tbody>
                </table>

                <!-- <span>{{parente_string}}</span> -->

                <app-navigate-bar (viewDays)="getViewChartDays($event)"></app-navigate-bar>
            </div>
        </div>
    </div>

    <div class="morris">
        <div class="row">
            <div class="col-lg-12">
                <section class="panel panel-primary">
                    <header class="panel-heading">Product Line Chart</header>
                </section>
                <div class="panel-body">
                  <!-- <app-multi-y-axis-chart></app-multi-y-axis-chart> -->
                  <!-- <app-multiple-y-axis-line></app-multiple-y-axis-line> -->
                  <!-- <app-nvd3-line-charts *ngIf = "product$.dataReady"
                  [ranks]="product$.rankValueArrary"
                  [prices]="product$.priceValueArrary"
                  [reviews]="product$.reviewsValueArray"
                  [ratings]="product$.ratingValueArrary"
                ></app-nvd3-line-charts> -->
                <app-charts-rank *ngIf="product$.dataReady"
            
                [ranks]="product$.rankValueArrary"
                [prices]="product$.priceValueArrary"
                
                ></app-charts-rank>
                </div>
            </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
              <section class="panel panel-primary">
                  <header class="panel-heading">Product Vertical Chart</header>
              </section>
              <div class="panel-body">
                  <!-- <app-bar-verticals></app-bar-verticals> -->
                  <app-charts-review *ngIf="product$.dataReady"
                  [ratings]="product$.ratingValueArrary"
                  [reviews]="product$.reviewsValueArray"
                      
                  ></app-charts-review>
              </div>
          </div>
        </div>
    </div>
    <div class="row">
      <div class="panel-heading">
        <button class="btn btn-info" (click)="AddNote()">Add New Note</button>
      </div>
      <div class="col-lg-12">
        <table class="table table-inverse">
          <thead class="thead-inverse">
            <tr>
              <th class="text-center">Index</th>
              <th class="text-center">Create Date</th>
              <th class="text-center">Content</th>
              <th class="text-center">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of noteList | paginate: { id: 'server', itemsPerPage: pageCount, currentPage: p, totalItems: total }; let itemIndex= index;">
              <td class="text-center">{{item.id}}</td>
              <td class="text-center" style="width: 120px;">{{item.addDate}}</td>
              <td class="text-center">{{item.content}}</td>
              <td class="text-center" style="width: 120px;">
                <!-- <i id="fa-pen" class="fa fa-pencil" aria-hidden="true"></i> -->
                <!-- <i id="fa-time" class="fa fa-times" aria-hidden="true" (click)="deleteSelectedNote(itemIndex)"></i> -->
                <i id="fa-time" class="fa fa-times" aria-hidden="true" (click)="testingDelete(item.id)"></i>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="has-text-centered">
        <!-- <div class="spinner" [ngClass]="{ 'hidden': !loading }"></div> -->
        <pagination-controls (pageChange)="getNotePage($event)" id="server"></pagination-controls>
      </div>
    </div>
</section>
